<template>
  <div class="finan-view">
    <div class="finan-view-text">我的购买</div>
    <table cellpadding="0" cellspacing="0">
      <tr>
        <th>名称</th>
        <th class="finan-view-text-price">金额/昨日收益</th>
        <th>累计收益</th>
      </tr>
      <tbody>
        <tr v-for="(item,index) in financialOrder" :key="index">
          <td>
            <div class="finan-view-text-name">{{item.product_name}}</div>
            </td>
          <td>
            <div class="finan-view-text-price">
              <div>{{item.product_price}}</div>
              <div class="finan-view-text-price-color">{{item.dayincome}}</div>
            </div>
          </td>
          <td>
            <div class="finan-view-text-income">{{item.allIncome}}</div>
          </td>
        </tr>

      </tbody>
    </table>
    </div>
</template>

<script>
export default {
  data() {
    return {
      upPrice:[],
      allIncome:[],
    }
  },
  props:{
    financialOrder:Array
  },
  methods:{
    getData(){

    }
  }
}
</script>

<style lang="less">
.finan-view-text {
  margin-left: 10px;
  margin-top: 10px;
  color: rgba(16, 16, 16, 100);
  font-size: 20px;
  text-align: left;
  font-family: PingFangSC-regular;
}
table {
  width: 95%;
  // height: 500px;
  margin: 15px auto;
  border: 1px solid rgba(187, 187, 187, 100);
  border-bottom: none;
  border-radius: 20px 0px 20 0px;
  background-color: rgb(250, 250, 250);
  
  tr {
    width: 100%;
    height: 40px;
    margin-bottom: 20px;
    padding-bottom: 5px;
    th {
      color: rgba(162, 163, 164, 100);
      font-size: 14px;
      text-align: center;
      font-family: PingFangSC-regular;
      border-bottom: 1px solid rgba(187, 187, 187, 100);
    }
    td {
      border-bottom: 1px solid rgba(187, 187, 187, 100);
      .finan-view-text-name {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 15px;
        width: 140px;
        height: 50px;
        overflow:hidden; 
        text-overflow:ellipsis;
        display:-webkit-box; 
    /* autoprefixer: off */
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2; 
        word-break:break-all;
      }
      .finan-view-text-price {
        margin-left: 30px;
        color: rgba(16, 16, 16, 100);
        font-size: 16px;
        .finan-view-text-price-color {
          color: red;
        }
      }
      .finan-view-text-income {
        margin-left: 15px;
        color: rgba(224, 19, 36, 100);
        font-size: 18px;
        text-align: left;
        font-family: PingFangSC-regular;
      }
    }
  }
}
table tbody {
  tr {
    // height: 25px;
    line-height: 25px
    
  }
  tr:last-child {
    border:  none;
  }
}
</style>